<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <qqq></qqq>
        <qqq></qqq>
        <qqq></qqq>
        <!-- <myName></myName> -->
        <my-name></my-name>
        <aaa></aaa>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // 全局组件  局部组件  全局过滤器 全局自定义指令
    // 组件的名字 在 vue中  烤串命名 时最安全的；不能使用已经存在的html标签
    // 
    obj = {
      count:100
    }
    Vue.component('qqq',{
      // 配置项
      template:"<h1 @click='add'>{{count}}</h1>",
      data() {
        // 组件中的data必须是一个函数 返回一个对象; 为了保证数据的独立性
        return {
          name:"珠峰"
        }
      },
      data() {
        return obj
      },
      methods: {
        add(){
          this.count++
        }
      },
    })
    Vue.component('myName',{
      // 配置项
      template:"<h1>{{name}}</h1>",
      data() {
        // 组件中的data必须是一个函数 返回一个对象
        return {
          name:"珠峰"
        }
      },
    })
    Vue.component('my-name',{
      // 配置项
      template:"<h1>{{name}}</h1>",
      data() {
        // 组件中的data必须是一个函数 返回一个对象
        return {
          name:"珠峰"
        }
      },
      
    })
    let a = {
      template:'<h2>hsfghdfsghfdghfgh</h2>'
    }
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰"
        },
        components:{
          aaa:a
        }
    });
</script>